<script setup lang="ts">
import type { EchartsUIType } from '@vben/plugins/echarts';

import { ref } from 'vue';

import { EchartsUI, useEcharts } from '@vben/plugins/echarts';

import { Card } from 'ant-design-vue';

const chartRef = ref<EchartsUIType>();

const { renderEcharts } = useEcharts(chartRef);

const options = {
  title: {
    text: '受骗类型统计',
    subtext: '数据来自网络',
    left: 'center',
  },
  tooltip: {
    trigger: 'item', // 鼠标悬停时触发
    formatter: (params: any) => {
      return `${params.name}: ${params.value.value} 次`; // 自定义格式化内容
    },
  },
  dataset: [
    {
      dimensions: ['name', 'value'],
      source: [
        { name: '色情诈骗', value: 310 },
        { name: '冒充诈骗', value: 1548 },
        { name: '网络诈骗', value: 135 },
        { name: '电信诈骗', value: 1548 },
        { name: '金融诈骗', value: 335 },
        { name: '投资诈骗', value: 310 },
        { name: '购物诈骗', value: 234 },
        { name: '贷款诈骗', value: 135 },
        { name: '兼职诈骗', value: 1548 },
        { name: '刷单诈骗', value: 335 },
        { name: '冒充公检法诈骗', value: 310 },
        { name: '网络赌博诈骗', value: 234 },
        { name: '传销诈骗', value: 135 },
        { name: '其他诈骗', value: 1548 },
      ],
    },
    {
      transform: {
        type: 'sort',
        config: { dimension: 'value', order: 'desc' },
      },
    },
  ],
  series: [
    {
      name: '受骗类型',
      type: 'bar',
      encode: {
        x: 'name', // 绑定到 dataset 的维度
        y: 'value', // 绑定到 dataset 的维度
      },
      itemStyle: {
        color: (params: any) => {
          const colors = [
            '#5470c6',
            '#91cc75',
            '#fac858',
            '#ee6666',
            '#73c0de',
            '#3ba272',
            '#fc8452',
            '#9a60b4',
            '#ea7ccc',
          ];
          return colors[params.dataIndex % colors.length]; // 循环使用颜色
        },
      },
    },
  ],
  xAxis: {
    type: 'category',
    axisLabel: {
      interval: 0,
      rotate: 30,
    },
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      formatter: '{value} 次',
    },
  },
};

renderEcharts(options as any);
</script>

<template>
  <div style="margin-top: 20px">
    <Card title="受骗类型统计">
      <EchartsUI ref="chartRef" />
    </Card>
  </div>
</template>
